<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>出错啦</title>
		<style>
			/* cyrillic-ext */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 400;
				src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
				unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
			}
			/* cyrillic */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 400;
				src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
				unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
			}
			/* vietnamese */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 400;
				src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
				unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
			}
			/* latin-ext */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 400;
				src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 400;
				src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* cyrillic-ext */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 600;
				src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gTD_u50.woff2) format('woff2');
				unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
			}
			/* cyrillic */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 600;
				src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3g3D_u50.woff2) format('woff2');
				unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
			}
			/* vietnamese */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 600;
				src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gbD_u50.woff2) format('woff2');
				unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
			}
			/* latin-ext */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 600;
				src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2) format('woff2');
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 600;
				src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2');
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* cyrillic-ext */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 700;
				src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gTD_u50.woff2) format('woff2');
				unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
			}
			/* cyrillic */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 700;
				src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3g3D_u50.woff2) format('woff2');
				unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
			}
			/* vietnamese */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 700;
				src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gbD_u50.woff2) format('woff2');
				unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
			}
			/* latin-ext */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 700;
				src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2) format('woff2');
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			
			@font-face {
				font-family: 'Montserrat';
				font-style: normal;
				font-weight: 700;
				src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
		</style>
		<style>
			/* tamil */
			
			@font-face {
				font-family: 'Catamaran';
				font-style: normal;
				font-weight: 400;
				src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r8zRAW_0.woff2) format('woff2');
				unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
			}
			/* latin-ext */
			
			@font-face {
				font-family: 'Catamaran';
				font-style: normal;
				font-weight: 400;
				src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r6zRAW_0.woff2) format('woff2');
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			
			@font-face {
				font-family: 'Catamaran';
				font-style: normal;
				font-weight: 400;
				src: local('Catamaran Regular'), local('Catamaran-Regular'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0IIpQoyXQa2RxT7-5r5TRA.woff2) format('woff2');
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* tamil */
			
			@font-face {
				font-family: 'Catamaran';
				font-style: normal;
				font-weight: 800;
				src: local('Catamaran ExtraBold'), local('Catamaran-ExtraBold'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0NIpQoyXQa2RxT7-5jQhJVctyB1Wk.woff2) format('woff2');
				unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
			}
			/* latin-ext */
			
			@font-face {
				font-family: 'Catamaran';
				font-style: normal;
				font-weight: 800;
				src: local('Catamaran ExtraBold'), local('Catamaran-ExtraBold'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0NIpQoyXQa2RxT7-5jQhJVatyB1Wk.woff2) format('woff2');
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			
			@font-face {
				font-family: 'Catamaran';
				font-style: normal;
				font-weight: 800;
				src: local('Catamaran ExtraBold'), local('Catamaran-ExtraBold'), url(https://fonts.gstatic.com/s/catamaran/v4/o-0NIpQoyXQa2RxT7-5jQhJVZNyB.woff2) format('woff2');
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
		</style>
		<style>
			.error-container {
				text-align: center;
				font-size: 180px;
				font-family: 'Catamaran', sans-serif;
				font-weight: 800;
				margin: 20px 15px;
			}
			
			.error-container>span {
				display: inline-block;
				line-height: 0.7;
				position: relative;
				color: #FFB485;
			}
			
			.error-container>span>span {
				display: inline-block;
				position: relative;
			}
			
			.error-container>span:nth-of-type(1) {
				perspective: 1000px;
				perspective-origin: 500% 50%;
				color: #F0E395;
			}
			
			.error-container>span:nth-of-type(1)>span {
				transform-origin: 50% 100% 0px;
				transform: rotateX(0);
				animation: easyoutelastic 8s infinite;
			}
			
			.error-container>span:nth-of-type(3) {
				perspective: none;
				perspective-origin: 50% 50%;
				color: #D15C95;
			}
			
			.error-container>span:nth-of-type(3)>span {
				transform-origin: 100% 100% 0px;
				transform: rotate(0deg);
				animation: rotatedrop 8s infinite;
			}
			
			@keyframes easyoutelastic {
				0% {
					transform: rotateX(0);
				}
				9% {
					transform: rotateX(210deg);
				}
				13% {
					transform: rotateX(150deg);
				}
				16% {
					transform: rotateX(200deg);
				}
				18% {
					transform: rotateX(170deg);
				}
				20% {
					transform: rotateX(180deg);
				}
				60% {
					transform: rotateX(180deg);
				}
				80% {
					transform: rotateX(0);
				}
				100% {
					transform: rotateX(0);
				}
			}
			
			@keyframes rotatedrop {
				0% {
					transform: rotate(0);
				}
				10% {
					transform: rotate(30deg);
				}
				15% {
					transform: rotate(90deg);
				}
				70% {
					transform: rotate(90deg);
				}
				80% {
					transform: rotate(0);
				}
				100% {
					transform: rotateX(0);
				}
			}
			/* demo stuff */
			
			* {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			
			body {
				background-color: #f4f4f4;
				margin-bottom: 50px;
			}
			
			html,
			button,
			input,
			select,
			textarea {
				font-family: 'Montserrat', Helvetica, sans-serif;
				color: #bbb;
			}
			
			h1 {
				text-align: center;
				margin: 30px 15px;
			}
			
			.zoom-area {
				max-width: 490px;
				margin: 30px auto 30px;
				font-size: 19px;
				text-align: center;
			}
			
			.link-container {
				text-align: center;
			}
			
			a.more-link {
				text-transform: uppercase;
				font-size: 13px;
				background-color: #bbb;
				padding: 10px 15px;
				border-radius: 0;
				color: #fff;
				display: inline-block;
				margin-right: 5px;
				margin-bottom: 5px;
				line-height: 1.5;
				text-decoration: none;
				margin-top: 50px;
				letter-spacing: 1px;
			}
		</style>
	</head>

	<body>
		<h1>404 Error Page</h1>
		<p class="zoom-area" th:text="'嘿你的 '+${status}+'.'"></p>
		<section class="error-container">
			<span><span th:text="${status/100}"></span></span>
			<span th:text="${status/10%10}"></span>
			<span><span th:text="${status%10}"></span></span>
		</section>
		<div class="link-container">
			<a th:href="@{/main/index}" class="more-link">还是回去吧</a>
		</div>
	</body>

</html>